<!doctype html>
<html lang="en">

	<head>
		<title>地图</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">-->
		<link rel="stylesheet" href="css/demo-center.css" type="text/css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%
			}
			
			.input-item {
				flex-wrap: initial;
				height: 2.2rem;
			}
			
			.one .btn {
				color: #fff;
				width: 6rem;
				margin: 0 1rem 0 2rem;
				border-radius: 0;
				border-color: #fff;
			}
			
			.input-card {
				flex-direction: row;
				left: 0;
				right: auto;
				width: auto;
				background: rgba(107, 196, 252, 0.7);
				padding-top: 0;
			}
			
			.amap-toolbar {
				top: 200px !important;
			}
			
			.input-text {
				width: 4rem;
				margin-right: 1rem;
			}
			
			.ceng-list {
				white-space: nowrap;
				display: flex;
				height: 45px;
			}
			
			.ceng-item {
				white-space: initial;
				text-align: center;
				align-self: center;
				width: 35px;
				height: 35px;
				overflow: hidden;
				background-color: #fff;
				margin-right: 10px;
				border: 1px solid #9e99b9;
			}
			
			.ceng-item.ac {
				color: #fff;
				background-color: rgba(107, 196, 252, 0.7);
			}
			
			.title {
				font-size: 14px;
				color: #fff;
				height: 30px;
				line-height: 30px;
			}
			
			.right-pro {
				position: fixed;
				right: 0;
				top: 0;
				bottom: 0;
				width: 180px;
				height: 100%;
				background-color: rgba(107, 196, 252, 0.7);
				overflow: hidden;
			}
			
			.right-pro.ac {
				right: 180px;
			}
			
			.right-pro h3 {
				padding-left: 25px;
				padding-top: 20px;
				padding-bottom: 6px;
				color: #fff;
				font-size: 16px;
				border-bottom: 1px solid #333;
			}
			
			.right-pro .add {
				padding: 6px 0;
				padding-left: 20px;
				border-bottom: 1px solid #333;
			}
			
			.right-pro .add .btn {
				width: 90%;
				background-color: #fff;
				border-color: #fff;
				border-radius: 5px;
			}
			.right-pro .add .btn:hover {
				color: #fff;
				background-color: rgba(107, 196, 252, 0.7);
			}
			
			.right-pro .list {
				
				width: 197px;
				height: 80%;
				overflow:hidden ;
				   overflow-y: scroll;
			}

			.list .item {
				padding: 5px 0;
				padding-left: 25px;
			}
			.list .item.ac {
				background-color: #009688;
			}
			.list .item .top-main {
				display: flex;
				justify-content: space-between;
			}
			
			.list .item .top-main .name {
				flex: 2;
				font-size: 14px;
				color: #fff;
				height: 20px;
				line-height: 20px;
				overflow: hidden;
			}
			
			.list .item .top-main .del {
				margin-right: 20px;
				background-color: #fff;
			}
			
			.list .item .tip {
				font-size: 14px;
				color: #fff;
				    word-break: break-all;
			}
		</style>

	</head>

	<body>
		<a id="jietuAuto" class="down" href="" download="downImg" style="display: none;">截图下载</a>
		<div id='container'></div>
		<!--操作说明-->
		<div class='info' style="bottom: 1rem;top: auto;right: 50%;margin-right: -11rem;">
			操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制,右键终止操作
		</div>
		<!--工具-->
		<div class="input-card" style='top:0;bottom: auto;'>
			<div class="one">
				<div class="title">选择工具</div>
				<div class="input-item">
					<div class="ceng-list">
						<div class="ceng-item" data-value="marker">点</div>
						<div class="ceng-item" data-value="polyline">折线</div>
						<div class="ceng-item" data-value="polygon">多边形</div>
						<div class="ceng-item" data-value="rectangle">矩形</div>
						<div class="ceng-item" data-value="circle">圆</div>
					</div>
					<button id="clear" type="button" class="btn">清除</button>
					<button id="close" type="button" class="btn">关闭绘图</button>
				</div>
			</div>
			<div>
				<div class="title">其它工具</div>
				<div class="input-item">
					<div class="ceng-list">
						<div class="ceng-item ac" id="biaochi" >标尺</div>
						<div class="ceng-item" id="pngdowload" >下载</div>
					</div>
				</div>
			</div>
		</div>
		<!--右侧项目与点位-->
		<div class="right-pro" style="right: 180px;">
			<h3>项目</h3>
			<div class="add">
				<button id="addpro" type="button" class="btn">新增项目</button>
			</div>
			<div class="list" id="showproject">
				<!--<div class="item">
					<div class="top-main">
						<div class="name">项目名称</div>
						<div class="del">删除</div>
					</div>
					<div class="tip">2317个点位</div>
				</div>-->
			</div>
		</div>
		<div class="right-pro" style="background: rgba(53, 176, 253,.7);">
			<h3>点位</h3>
			<div class="add">
				<button id="adddian" type="button" class="btn">新增点位</button>
			</div>
			<div class="list" id="showspot">
				<!--<div class="item">
					<div class="top-main">
						<div class="name">点位名称</div>
						<div class="del">删除</div>
					</div>
					<div class="tip">x:127.00 y:37.4322</div>
				</div>-->
				
			</div>
		</div>
		<script src="//webapi.amap.com/maps?v=1.4.15&key=9ddc1f630c4995e134e90f977522d87a&plugin=AMap.MouseTool,AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/layui/layui.all.js"></script>
		<script type="text/javascript" src="js/html2canvas.min.js"></script>
		<script type="text/javascript">
			var topdata=[]; // 当前页面所有项目  及 项目下的点    点要注意吧类型保存下来 
			//2019年11月7日09:32:16 项目也有点位           新增的点位前提是项目点位必须 有 ！！
			
			var scale = new AMap.Scale({
					visible: true
				}),
				toolBar = new AMap.ToolBar({
					visible: true
				}),
				overView = new AMap.OverView({
					isOpen: true,
					visible: true
				});
			var map = new AMap.Map('container', {
				zoom: 14
			});
			map.addControl(scale);
			map.addControl(toolBar);
			map.addControl(overView);
			AMap.plugin('AMap.Geolocation', function() {
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：5s
					buttonPosition: 'RB', //定位按钮的停靠位置
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition(function(status, result) {
					if(status === 'complete') {
						onComplete(result)
					} else {
						onError(result)
					}
				});
			});
			
			
			//解析定位结果
			function onComplete(data) {
//				//console.log(data)
			}
			//解析定位错误信息
			function onError(data) {
//				//console.log(data)
			}
			var mouseTool = new AMap.MouseTool(map) ;
			//监听draw事件可获取画好的覆盖物
			var overlays = [];
			var overlayGroups={};
			mouseTool.on('draw', function(e) {
				//console.log(e);
				overlays.push(e.obj);
				overlayGroups=new AMap.OverlayGroup(overlays);
				map.add(overlayGroups);
				//a
				var type=e.obj.CLASS_NAME;
				// 判断是否是 有点位 没有就不对右侧的列表进行添加 有就添加
				var projectindex=$("#showproject").find(".item.ac").index();
				var spotindex=$("#showspot").find(".item.ac").index();
				
				var lnglatarr=[];
				if(type==="AMap.Marker"){
					lnglatarr.push(e.obj.getPosition());
				}else if(type==="AMap.Circle"){
    				var obj=e.obj.getCenter();
    				obj.radius=e.obj.getRadius()
    				lnglatarr.push(obj);
				}else{
					lnglatarr=e.obj.getPath();
				}
				if(projectindex<0){
					return
				}
				// 给项目添加区域
				if(topdata[projectindex].nowspot.type===""){
					topdata[projectindex].nowspot.type=type;
					topdata[projectindex].nowspot.lnglat=lnglatarr;
					return;
				}
				// 给点位添加
				if(spotindex>=0){
//					if(topdata[projectindex].spotdata[spotindex].type!==""){
//						// 删除上一个
//						var oo=overlays.splice(overlays.length-2,1);
//						map.remove(oo);
//					}
					topdata[projectindex].spotdata[spotindex].type=type;
					topdata[projectindex].spotdata[spotindex].lnglat=lnglatarr;
					var str="";
					for(var i=0;i<lnglatarr.length;i++){
						str+="lng:"+lnglatarr[i].lng+" lat:"+lnglatarr[i].lat+"<br>";
					}
					$("#showspot").find(".item.ac").find(".tip").html(str);
				}
				
			})

			$("#clear").click(function() {
				map.remove(overlayGroups)
				overlays = [];
			})
			$("#close").click(function() {
				mouseTool.close(true) //关闭，并清除覆盖物
				$(".ceng-item").removeClass("ac")
			})
			// 标尺的转换
			$("#biaochi").click(function() {
				if($(this).hasClass("ac")) {
					// 关闭标尺
					scale.hide();
					toolBar.hide();
				} else {
					// 开启标尺
					scale.show();
					toolBar.show();
				}
				$(this).toggleClass("ac")
			})
			//图片的下载
			$("#pngdowload").click(function() {
				//下载

				//自动截屏
				html2canvas($("#container"), {
					foreignObjectRendering: true,
					useCORS: true,
					height: $("#container").outerHeight() + 20,
					width: $("#container").outerWidth() + 20,
					onrendered: function(canvas) {
						//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
						var timestamp = Date.parse(new Date());
						//把截取到的图片替换到a标签的路径下载
						$("#jietuAuto").attr('href', canvas.toDataURL());
						//下载下来的图片名字
						$("#jietuAuto").attr('download', timestamp + '.png');
						//document.body.appendChild(canvas);
						$('#jietuAuto')[0].click();
					}
					//可以带上宽高截取你所需要的部分内容
				});
			})
			$(".one .ceng-list").on("click", ".ceng-item", function() {
				$(this).addClass("ac").siblings().removeClass("ac");
				var value = $(this).data("value")
				draw(value);
			})
//			draw('marker');
			function getdata(){
				$.getJSON("map-c.json").then((res)=>{
					console.log(res)
					if(res.list.length>0){
						renderdata(res.list);
						topdata=res.list;
					}

				},(err)=>{
					
				})
			}
			getdata();
			
			// 渲染数据
			function renderdata(list){
				for (var i=0;i<list.length;i++) {
					// 渲染项目数据
					var model=`<div class="item ${i===0?'ac':''}">
								<div class="top-main">
									<div class="name">${list[i].proname}</div>
									<div class="del">删除</div>
								</div>
								<div class="tip"><span>${list[i].spotdata.length}</span>个点位</div>
							</div>`;
					$("#showproject").append(model);
				}
				
				for(var j=0;j<list[0].spotdata.length;j++){
						// 渲染点位数据
						var str="";
						list[0].spotdata[j].lnglat.forEach(function(item){
							str+="lng:"+item.lng+" lat:"+item.lat+"<br>";
						})
						var spotmodel=`<div class="item ${j===0?'ac':''}">
								<div class="top-main">
									<div class="name">${list[0].spotdata[j].spotname}</div>
									<div class="del">删除</div>
								</div>
								<div class="tip">${str}</div>
							</div>`;
						$("#showspot").append(spotmodel);
						// 渲染层叠物
						if(j==0&&list[0].nowspot&&list[0].nowspot.type!==""){
							var nowarr=list[0].spotdata.concat();
							nowarr.unshift(list[0].nowspot);
							var lng=list[0].nowspot.lnglat[0].lng;
							var lat=list[0].nowspot.lnglat[0].lat;
							createdspot(nowarr);
						 	map.panTo([lng, lat]);
						}
							
						
					}
			}

			function draw(type) {
				switch(type) {
					case 'marker':
						{
							mouseTool.marker({
								//同Marker的Option设置
							});
							break;
						}
					case 'polyline':
						{
							mouseTool.polyline({
								strokeColor: '#80d8ff'
								//同Polyline的Option设置
							});
							break;
						}
					case 'polygon':
						{
							mouseTool.polygon({
								fillColor: '#00b0ff',
								strokeColor: '#80d8ff'
								//同Polygon的Option设置
							});
							break;
						}
					case 'rectangle':
						{
							mouseTool.rectangle({
								fillColor: '#00b0ff',
								strokeColor: '#80d8ff'
								//同Polygon的Option设置
							});
							break;
						}
					case 'circle':
						{
							mouseTool.circle({
								fillColor: '#00b0ff',
								strokeColor: '#80d8ff'
								//同Circle的Option设置
							});
							break;
						}
				}
			}
			
			//新增项目 
			$("#addpro").click(function(){
				layer.prompt({
					title: "新增项目名称"
				}, function(value, index) {
					//topdata
					var proobj={
						proname:value,
						spotdata:[],// 储存 点的信息
						nowspot:{
							type:"",//点位是什么类型 //项目也有点
							lnglat:[],// 点位的位置
						}
					}
					topdata.unshift(proobj);
					// 执行项目页面的渲染 
					$("#showproject").find(".ac").removeClass("ac")
					var model=`<div class="item ac">
								<div class="top-main">
									<div class="name">${topdata[0].proname}</div>
									<div class="del">删除</div>
								</div>
								<div class="tip"><span>${topdata[0].spotdata.length}</span>个点位</div>
							</div>`;
					$("#showproject").prepend(model);
					$("#showspot").empty();
					layer.close(index);
					$("#clear").click()
				})
			})
			//新增项目 结束
			
			//新增点位
			$("#adddian").click(function(){
				var showprojectindex=$("#showproject").find(".item.ac").index();
				if(showprojectindex<0){
					layer.msg("请先新增项目");
					return
				}
				var tabitem=topdata[showprojectindex];
				if(tabitem.nowspot.type===""){
					layer.msg("请为项目选择区域");
					return;
				}
				layer.prompt({
					title: "新增点位名称"
				}, function(value, index) {
					//topdata 下被选中项目内新增
					var spotobj={
						type:"",// 点位是什么类型的容易渲染
						spotname:value,//点位的名称
						lnglat:[],// 点位的位置
					}
						topdata[showprojectindex].spotdata.unshift(spotobj);
						
						$("#showspot").find(".ac").removeClass("ac");
						var model=`<div class="item ac">
								<div class="top-main">
									<div class="name">${topdata[showprojectindex].spotdata[0].spotname}</div>
									<div class="del">删除</div>
								</div>
								<div class="tip"></div>
							</div>`;
						$("#showspot").prepend(model);
						var texts=$("#showproject").find(".item.ac").find(".tip span").text();
						texts++;
						$("#showproject").find(".item.ac").find(".tip  span").text(texts);
					

					layer.close(index);
				})
			})
			//新增点位 结束
			
			
			
			
			
			//项目删除
			$("#showproject").on("click",".item .del",function(){
				var index=$(this).parent().parent().index();
				$(this).parent().parent().remove();
				topdata.splice(index,1);
				
				var flags=$(this).parent().parent().hasClass("ac");
				if(flags){
					// 有就清空右侧 然后给第一个加 ac
					$("#showspot").empty();
					$("#clear").click();
					if($("#showproject").find(".item").length>0){
					 	$("#showproject .item").eq(0).addClass("ac");
					 	var topstr="";
						for (var i=0;i<topdata[0].spotdata.length;i++) {
								var acstr="";
								if(i===0){
									acstr="ac";
								}
								var str="";
								topdata[0].spotdata[i].lnglat.forEach(function(item){
									str+="lng:"+item.lng+" lat:"+item.lat+"<br>";
								})
								var model=`<div class="item ${acstr}">
										<div class="top-main">
											<div class="name">${topdata[0].spotdata[i].spotname}</div>
											<div class="del">删除</div>
										</div>
										<div class="tip">${str}</div>
									</div>`;
									topstr+=model;
						}
						$("#showspot").html(topstr);
					 	
					 	if(topdata[0].nowspot.type!==""){
					 			var nowarr=topdata[0].spotdata.concat();
					 			nowarr.unshift(topdata[0].nowspot);
								var lng=topdata[0].nowspot.lnglat[0].lng;
								var lat=topdata[0].nowspot.lnglat[0].lat;
								 createdspot(nowarr);
								 map.panTo([lng, lat]);
							 
							
						}
					}
					
					
				}
				
				return false;
			})
			//项目改变
			$("#showproject").on("click",".item",function(){
				if($(this).hasClass("ac")){
					return;
				}
				$("#close").click();
				$("#clear").click();
				$(this).addClass("ac").siblings().removeClass("ac");
				var nowindex=$(this).index();
				var topstr="";
				for (var i=0;i<topdata[nowindex].spotdata.length;i++) {
						var acstr="";
						if(i===0){
							acstr="ac";
						}
						var str="";
						topdata[nowindex].spotdata[i].lnglat.forEach(function(item){
							str+="lng:"+item.lng+" lat:"+item.lat+"<br>";
						})
						var model=`<div class="item ${acstr}">
								<div class="top-main">
									<div class="name">${topdata[nowindex].spotdata[i].spotname}</div>
									<div class="del">删除</div>
								</div>
								<div class="tip">${str}</div>
							</div>`;
							topstr+=model;
				}
				$("#showspot").html(topstr);
				if(topdata[nowindex].nowspot.type!==""){
//					//console.log(topdata[nowindex].spotdata)
						var nowarr=topdata[nowindex].spotdata.concat();
						nowarr.unshift(topdata[nowindex].nowspot);
						var lng=topdata[nowindex].nowspot.lnglat[0].lng;
						var lat=topdata[nowindex].nowspot.lnglat[0].lat;
						 createdspot(nowarr);
						 map.panTo([lng, lat]);
					 
				}
				
			})
			
			function createdspot(list){
				//console.log(overlays);
				for (var i=0;i<list.length;i++) {
					switch(list[i].type) {
						case "AMap.Marker":
							{
								var maker=new AMap.Marker({
							        position: [list[i].lnglat[0].lng,list[i].lnglat[0].lat]
							    });
//							    //console.log(maker);
							    overlays.push(maker);
								break;
							}
						case "AMap.Polyline":
							{
								var datas=[];
								list[i].lnglat.forEach((item)=>{
									datas.push([item.lng,item.lat])
								})
								 var polyline = new AMap.Polyline({
									strokeColor: '#80d8ff',
							        path: datas
							    });
							    //console.log(polyline)
							    overlays.push(polyline);
								break;
							}
						case "AMap.Polygon":
							{
								var datas=[];
								list[i].lnglat.forEach((item)=>{
									datas.push([item.lng,item.lat])
								})
							 	var nowpol=new AMap.Polygon({
							        path: datas,
							        fillColor: '#00b0ff',
									strokeColor: '#80d8ff',
									fillOpacity:0.3,
									strokeOpacity:0.3
							    });
							    //console.log(nowpol)
							    overlays.push(nowpol);
								break;
							}
						case "AMap.Circle":
							{
								var circle= new	AMap.Circle({
									fillColor: '#00b0ff',
									strokeColor: '#80d8ff',
									fillOpacity:0.3,
									strokeOpacity:0.3,
									radius:list[i].lnglat[0].radius,
									center:[list[i].lnglat[0].lng,list[i].lnglat[0].lat]
								})
								//console.log(circle)
							    overlays.push(circle);
								break;
							}
					}
				}
				overlayGroups=new AMap.OverlayGroup(overlays);
				map.add(overlayGroups)
			}
			
			
			//点位删除
			$("#showspot").on("click",".item .del",function(){
				
				var showprojectindex=$("#showproject").find(".item.ac").index();
				var index=$(this).parent().parent().index();
				$(this).parent().parent().remove();
				topdata[showprojectindex].spotdata.splice(index,1);
				var texts=$("#showproject").find(".item.ac").find(".tip span").text();
					texts--;
					$("#showproject").find(".item.ac").find(".tip  span").text(texts);
					var flags=$(this).parent().parent().hasClass("ac");
					if(flags){
						if($("#showspot").find(".item").length>0){
						 	$("#showspot .item").eq(0).addClass("ac");					 						 	
						 	// 执行 点的渲染
						 	if(topdata[showprojectindex].nowspot.type!==""){
						 		$("#clear").click();
						 		var nowarr=topdata[showprojectindex].spotdata.concat();
						 		nowarr.unshift(topdata[showprojectindex].nowspot);
								var lng=topdata[showprojectindex].nowspot.lnglat[0].lng;
								var lat=topdata[showprojectindex].nowspot.lnglat[0].lat;
								 createdspot(nowarr);
								 map.panTo([lng, lat]);
							 
							}
						 }
					}
				
				return false;
			})
			//点位的改变
			$("#showspot").on("click",".item",function(){
				var showprojectindex=$("#showproject").find(".item.ac").index();
				if($(this).hasClass("ac")){
					return;
				}
				$(this).addClass("ac").siblings().removeClass("ac");
				var index=$(this).index();
				if(topdata[showprojectindex].spotdata.length>0){
//					//console.log(topdata[showprojectindex].spotdata)
					if(topdata[showprojectindex].spotdata[index].lnglat.length>0){
						var lng=topdata[showprojectindex].spotdata[index].lnglat[0].lng;
						var lat=topdata[showprojectindex].spotdata[index].lnglat[0].lat;
						 map.panTo([lng, lat]);
					 
					}
				}
			})
			
			
			
//			//删除一个 点位 
//AMap.event.addListener(mouseTool, 'draw', function(e) {
//		mouseTool.close(); //关闭鼠标功能
//		var contextMenu = new AMap.ContextMenu(); //创建右键菜单
//		var type = e.obj.CLASS_NAME;
//		if(type == 'AMap.Circle') {
//			var circle = new AMap.Circle();
//			circle = e.obj;
//
//			//右键放大
//			contextMenu.addItem("放大一级", function() {
//				map.zoomIn();
//			}, 0);
//			//右键缩小
//			contextMenu.addItem("缩小一级", function() {
//				map.zoomOut();
//			}, 1);
//
//			var bounds = circle.getBounds(); //圆形外切矩形范围
//			var southWest = bounds.getSouthWest();
//			var northEast = bounds.getNorthEast();
//
//			var maxLng = northEast.getLng();
//			var maxLat = northEast.getLat();
//			var minLng = southWest.getLng();
//			var minLat = southWest.getLat();
//
//			contextMenu.addItem("删除标记", function() {
//				map.remove(e.obj);
//			}, 2);
//		} else {
//			if(type != 'AMap.Polyline') {
//
//				$('#markerMap_div').hide();
//				$('#markerPin_div').hide();
//				$('#markerFlag_div').hide();
//				document.onmousemove = null;
//				var marker = new AMap.Marker();
//				marker = e.obj;
//				var lng = marker.getPosition().getLng();
//				var lat = marker.getPosition().getLat();
//
//			}
//
//			contextMenu.addItem("删除标记", function() {
//				map.remove(e.obj);
//			}, 0);
//		}
//		e.obj.on('rightclick', function(e) {
//			contextMenu.open(map, e.lnglat);
//		});
//
//	});
		</script>
	</body>

</html>